/**
 * 首页图标 - leo
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet, Text, View, Image, TouchableOpacity
} from 'react-native';

export default class HomeCard extends Component {
  static propTypes = {
    imageUri: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired
  };

  render() {
    const { imageUri, title, click } = this.props;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => click()}>
          <View style={styles.iconWrap}>
            <Image resizeMode="cover" source={{ uri: imageUri }} style={styles.adimages} />
          </View>
          <View style={styles.titleWrap}>
            <Text style={styles.title}>{title}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center'
  },
  iconWrap: {
    width: SCALE(100),
    height: SCALE(100),
    borderRadius: SCALE(100),
    // paddingTop: 2,
    // paddingBottom: 2,
    // paddingLeft: 8,
    // paddingRight: 8,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    // backgroundColor: '#ccc',
  },
  adimages: {
    width: SCALE(100),
    height: SCALE(100)
  },
  titleWrap: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'center',
    overflow: 'hidden'
  },
  title: {
    color: '#595959',
    fontSize: 14,
    textAlign: 'center'
  }
});
